<template>
  <div :class="['session-item',active ? 'active' : '']">
    <!--  会话名称 -->
    <div class="name">{{ session.topic }}</div>
    <!--  会话消息数量和最近修改的时间-->
    <div class="count-time">
      <div class="count">
        {{ session.messages ? session.messages.length : 0 }}条对话
      </div>
      <div class="time">{{ session.updateTime }}</div>
    </div>
    <!--  当鼠标放在会话上时会弹出遮罩-->
    <div class="mask"></div>
    <!--  当鼠标放在会话上时会弹出删除按钮-->
    <div class="btn-wrapper">
      <el-icon :size="15" class="close">
        <el-popconfirm
            title="是否确认永久删除该聊天会话？"
            @confirm="handleDeleteSession"
        >
          <template #reference>
            <CircleClose/>
          </template>
        </el-popconfirm>
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import {CircleClose} from '@element-plus/icons-vue'
import {deleteChatSession} from "../api/chat-session.js";
// active 用于标记当前会话是否处于选中状态
// session 用于展示会话信息
const prop = defineProps({active: Boolean, session: {}})
// 定义删除事件
const emit = defineEmits(['delete'])
// 当鼠标放到会话上时，会弹出删除图标，点击删除图标调用删除接口发送删除事件
const handleDeleteSession = () => {
  deleteChatSession(prop.session.id).then((res) => {
    if (res.code === 200) {
      // 发送删除事件
      emit('delete', prop.session)
    }
  })
}
</script>

<style scoped>
.session-item {
  padding: 12px;
  background-color: white;
  border-radius: 10px;
  width: 250px;
  position: relative;
  /* 当鼠标放在会话上时改变鼠标的样式，暗示用户可以点击。目前还没做拖动的效果，以后会做。 */
  cursor: grab;
  /* 子元素的遮罩一开始会在外面，让溢出的遮罩不显示 */
  overflow: hidden;
}

.name {
  font-size: 14px;
  font-weight: 700;
  width: 200px;
  color: rgba(0, 0, 0, .8);
}

.count-time {
  margin-top: 10px;
  font-size: 10px;
  color: rgba(0, 0, 0, .5);
  display: flex;
  justify-content: space-between;
}

/* 当处于激活状态时增加蓝色描边 */
.session-item.active {
  /* 增加一些过渡 */
  transition: all 0.12s linear;
  border: 2px solid #1d93ab;
}

/* 按钮入场，从最右侧滑进去，渐渐变得不透明 */
.session-item:hover .btn-wrapper {
  opacity: 1;
  right: 20px;
}

/* 遮罩入场，从最左侧滑进去，渐渐变得不透明 */
.session-item:hover .mask {
  opacity: 1;
  left: 0;
}

.session-item:hover .btn-wrapper:hover {
  cursor: pointer;
}

.mask {
  /* 渐变样式 */
  transition: all 0.2s ease-out;
  /* 相当于父亲绝对布局 */
  position: absolute;
  background-color: rgba(0, 0, 0, 0.05);
  /* 和父亲元素一样宽盖住父元素 */
  width: 100%;
  /* 和父亲元素一样高 */
  height: 100%;
  /*位置移到父元素的最上面 */
  top: 0;
  /* 向父元素的最左侧再增加一个父亲元素当前宽度的距离 */
  left: -100%;
  /* 透明度为0 */
  opacity: 0;
}

/* 删除按钮样式的逻辑和mask类似 */
.btn-wrapper {
  color: rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease-out;
  position: absolute;
  top: 10px;
  right: -20px;
  z-index: 10;
  opacity: 0;
}

.btn-wrapper .edit {
  margin-right: 5px;
}
</style>